<template>
  <div class="home" align="center">
    <div id="container" :style="{marginTop: marginTops}">
      <h1>输入词库编号</h1>
      <p><el-input v-model="input" placeholder="请输入内容" id="input1" maxlength="6"></el-input></p>
      <p><el-button plain style="width: 120px; font-size: 18px" @click="start">确认</el-button></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      input: '',
      marginTops: (window.innerHeight / 2 - 120) + 'px',
    }
  },
  methods:{
    start(){
      if(this.input == null || this.input == ''){
        return;
      }
      localStorage.setItem("library",this.input)
      setTimeout(
          ()=>{
            const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            if (flag) {
              this.$router.replace('/phone')
            }else {
              this.$router.replace('/main')
            }

          }, 500
      )
    }
  },
  created() {
    console.log("finish")
    let library = localStorage.getItem("library")
    if(library != null){
      setTimeout(
          ()=>{
            const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            if (flag) {
              this.$router.replace('/phone/memorize')
            }else {
              this.$router.replace('/phone/memorize')
            }

          }, 500
      )
    }
    console.log(library)
  }
}
</script>
<style>
#container{
  width: 260px;
  height: 160px;
}
#input1{
  font-size: 22px;
  text-align: center;
}
</style>